;(function($){
	"use strict"
	$.fn.banner = function(options){
		var obj = {};
		var {items,list,autoplay,moveTime,delayTime,index} = options
		list = list === false ? false:true;
		autoplay = autoplay === false ? false:true;
		moveTime = moveTime || 200;
		delayTime = delayTime || 3000;
		index = index || 0;
		obj.iPrev = items.length-1;

		if(list){
			var str = "";
			for(var i = 0;i < items.length;i++){
				str += `<li></li>` 
			}
			obj.ul = $('<ul>').html(str);
			this.append(obj.ul);
			obj.ul.css({
				width:'60px',
				height:'24px',
				display:'flex',
				position:'absolute',
				left:'50%',
				bottom:0,
				listStyle:'none',
				justifyContent:'space-around',
				zIndex:20,
			}).children('li').css({
				width:'12px',
				height:'12px',
				borderRadius:'50%',
				background:'#000',
				textAlign:'center',
				fontSize:'12px',
			}).eq(index).css({
				background:'blue',
			})
			obj.ul.children('li').hover(function(){
				if($(this).index() < index){
					obj.listMove($(this).index())
				}
				if($(this).index() > index){
					obj.listMove($(this).index())
				}

				obj.ul.children('li').css({
					background:'#000',
				}).eq($(this).index()).css({
					background:'blue',
				})
				index = $(this).index();
			})
		}
		obj.listMove = function(iNow){
			items.eq(index).css({
				opacity:1,
			}).stop().animate({
				opacity:0,
			},moveTime).end().eq(iNow).css({
				opacity:0,
			}).stop().animate({
				opacity:1,
			},moveTime)
		}
		obj.auto  = function(){
			
		}
	}
})(jQuery);






















































;(function($){
    "use strict";
    $.fn.banner = function(options){
        var obj = {};
        var {items,list,autoPlay,moveTime,delayTime,index} = options;
		
        list = list===false ? false : true;
        autoPlay = autoPlay===false ? false : true;
        moveTime = moveTime || 200;
        delayTime = delayTime || 3000;

        index = index || 0;
		obj.iPrev = items.length-1;
        // 设置默认显示的图片
       

        // list的功能
        if(list){
            // L1.生成布局
            var str = "";
            for(var i=0;i<items.length;i++){
                str += `<li></li>`;
            }
            obj.ul = $("<ul>").html(str);
            this.append(obj.ul);
            obj.ul.css({
                width:"60px",
                height:"24px",
                display:"flex",
                position:"absolute",
				left:"50%",
                bottom:0,
                listStyle:"none",
                justifyContent:"space-around",
				zIndex:20
            }).children("li").css({
                width:"12px",
                height:"12px",
                borderRadius:"50%",
                background:"#000",
                textAlign:"center",
                fontSize:"12px",
            }).eq(index).css({
               background:"blue",
            })
            // 绑定事件
			obj.ul.children("li").hover(function(){
				 if($(this).index() < index){
					obj.listMove($(this).index())
				}
				if($(this).index() > index){
				    obj.listMove($(this).index())
				}
				
				obj.ul.children("li").css({
				    background:"#000",
				}).eq($(this).index()).css({
				    background:"blue",
				})
				index = $(this).index();
			})
        }  
		obj.listMove = function(iNow){
		     items.eq(index).css({
		        opacity:1,
		    }).stop().animate({
		        opacity:0,
		    },moveTime).end().eq(iNow).css({
		        opacity:0,
		    }).stop().animate({
		        opacity:1,
		    },moveTime)
		}
		obj.auto = function(){
			if(index == items.length-1){
			    index = 0;
			    obj.iPrev = items.length-1
			}else{
			    index ++;
			    obj.iPrev = index-1
			}
			items.eq(this.iPrev).css({
			    opacity:1,
			}).stop().animate({
			    opacity:0,
			},moveTime).end().eq(index).css({
			    opacity:0,
			}).stop().animate({
			    opacity:1,
			},moveTime)
			if(!list) return;
			this.ul.children("li").css({
			    background:"#000",
			}).eq(index).css({
			    background:"blue",
			})
		}
		if(autoPlay){
		    var t = setInterval(() => {
		        // right.trigger("click");
		        obj.auto()
		    }, delayTime);
		    this.hover(function(){
		        clearInterval(t)
		    },function(){
		        t = setInterval(() => {
		            obj.auto()
		        }, delayTime);
		    })
		}
	}
})(jQuery);